<template>
	<view class="container">
		<camera device-position="back" flash="off" class="camera-fullscreen" @error="cameraError"></camera>
		<view class="progress-container" v-if="isRecording">
			<view class="progress-bar" :style="{ width: progressWidth + '%' }"></view>
		</view>
		<view class="button-container">
			<view class="record-button" @touchstart="startRecord" @touchend="stopRecord">
				按住拍
			</view>
			<image src="/static/images/xiangce_white.png" class="upload-button" @click="uploadVideo"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ctx: null,
				isRecording: false, // 用于标记是否正在录像
				recordTimer: null, // 用于记录录像时长的定时器
				maxRecordTime: 15000, // 最大录像时长（单位：毫秒）
				currentRecordTime: 0, // 当前录像时长
				previewVideoPath: null, // 预览视频路径
			};
		},
		computed: {
			// 计算进度条宽度
			progressWidth() {
				return (this.currentRecordTime / this.maxRecordTime) * 100;
			},
		},
		methods: {
			startRecord() {
				if (this.isRecording) return; // 如果已经在录像，则不重复开始
				this.isRecording = true;
				this.currentRecordTime = 0; // 重置当前录像时长
				this.ctx = uni.createCameraContext();
				this.ctx.startRecord({
					success: () => {
						console.log('开始录像');
						// 启动定时器，记录录像时长
						this.recordTimer = setInterval(() => {
							this.currentRecordTime += 1000; // 每秒增加1000毫秒
							if (this.currentRecordTime >= this.maxRecordTime) {
								this.stopRecord(true); // 自动停止录像，并传入标志表示已达到最大时长
							}
						}, 1000);
					},
					fail: (err) => {
						console.error('录像失败：', err);
						this.isRecording = false; // 如果失败，重置状态
					},
				});
			},
			stopRecord() {
				if (!this.isRecording) return; // 如果没有在录像，则不执行停止操作
				this.ctx.stopRecord({
					success: (res) => {
						console.log('视频路径：', res.tempVideoPath);
						this.previewVideoPath = res.tempVideoPath; // 保存视频路径用于预览
						this.isRecording = false; // 停止录像后重置状态
						// 不管是否达到最大时长，都跳转到预览页面
						this.navigateToNextPage(this.previewVideoPath);
					},
					fail: (err) => {
						console.error('停止录像失败：', err);
					},
				});
				// 清除定时器
				if (this.recordTimer) {
					clearInterval(this.recordTimer);
					this.recordTimer = null;
				}
			},
			navigateToNextPage(videoPath) {
				// 假设下一个页面的路由名为 'nextPage'
				uni.navigateTo({
					url: `/pages/commponent/preview_video?videoPath=${encodeURIComponent(videoPath)}`,
				});
			},
			uploadVideo() {
				// 调用 uni.chooseVideo 选择本地视频
				uni.chooseVideo({
					sourceType: ['album'], // 只允许从相册选择
					success: (res) => {
						console.log('选择的视频路径：', res.tempFilePath);
						// 将选择的视频路径传递到预览页面
						this.navigateToNextPage(res.tempFilePath);
					},
					fail: (err) => {
						console.error('选择视频失败：', err);
					},
				});
			},
			cameraError(err) {
				console.error('摄像头错误：', err);
			},
		},
	};
</script>

<style>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.camera-fullscreen {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.record-button {
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50%;
		background-color: #00a128;
		color: white;
		text-align: center;
		position: absolute;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		border: 2px solid #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.upload-button {
		width: 60px;
		height: 60px;
		text-align: center;
		position: absolute;
		bottom: 50px;
		right: 50px;
	}

	.progress-container {
		position: absolute;
		bottom: 160px;
		/* 距离按钮上方10px */
		width: 90%;
		height: 10px;
		background-color: #ddd;
		border-radius: 5px;
		left: 50%;
		transform: translateX(-50%);
	}

	.progress-bar {
		height: 100%;
		background-color: #00a128;
		border-radius: 5px;
	}

	.preview-video {
		width: 100%;
		height: 100%;
	}
</style>